/*
 * @Author: yangzonglong
 * @Date: 2021-05-07 10:55:54
 * @version: v1.0.0
 * @Descripttion: 工作流历史
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-09-08 13:31:17
 * @Auditor:
 */
import React, { useState, useCallback, useMemo } from 'react';
import { Modal } from 'antd';
import { Table } from '@library';
import { ActionText, BtnUpload } from '@library';
import IconButton from './../iconButton/IconButton';
import { columns } from './data';

const bodyStyle: React.CSSProperties = {
  height: '500px',
  maxHeight: '500px',
  display: 'flex',
  flexDirection: 'column',
};
interface AuditHistoryProps {
  businessId?: string | null;
  workFlowInstanceId?: string | null;
}

const T = window.$app.t;
const dfPageSizeOptions = ['20'];

export default ({ businessId, workFlowInstanceId }: AuditHistoryProps) => {
  const [visible, setVisible] = useState(false);
  const onCancel = useCallback(() => setVisible(false), []);
  const onShow = useCallback(() => setVisible(true), []);

  const query = useMemo(() => {
    const where: Record<string, any> = {};

    if (businessId) where.businessId = businessId;
    else where.WorkFlowInstanceId = workFlowInstanceId;

    return {
      where,
      order: [['createdAt', 'ASC']]
    };
  }, [businessId, workFlowInstanceId]);


  const extra = useMemo(() => {
    return [
      {
        dataIndex: 'fileList',
        render: (_: any, record: any) => (
          <BtnUpload
            onlyShowList={true}
            onChange={() => { }}
            onDelete={() => { }}
            fileList={_ || []}
            targetNode={<ActionText type={(_?.length ? _?.length >= 2 ? `${T('total')}${_?.length || 0}${T('gfj')}` : (_[0]?.fileName || _[0]?.name || _[0]?.response?.originalname) : '')} />}
          />
        )
      }
    ];
  }, []);

  return (
    <>
      <IconButton onClick={onShow} icon="icon" text={window.$app.t('viewWorkflowHistory')} />
      <Modal bodyStyle={bodyStyle} title={window.$app.t('workflowHistory')} width={1000} onCancel={onCancel} visible={visible} footer={null}>
        <Table dfPageSizeOptions={dfPageSizeOptions} extra={extra} query={query} columns={columns} url="/bk/mid/workflow/getApprovalHistoryAndForecastTask" />
      </Modal>
    </>
  );
};
